<template>
  <view class="main">
    <view v-for="item in obj" class="roleList">
      <view class="imgText">
        {{item.name.substr(0, 1)}}
      </view>
      <view class="useTags">
        <view class="useTag">
          <text class="uTag">{{item.name}}</text>
          <u-tag v-if="item.state == 1" text="当前角色" type="warning" size="mini"></u-tag>
        </view>
        <view>
          男<text style="margin-left: 10rpx;">{{item.age}}岁</text>
        </view>
      </view>
      <view class="useInp">
        <view class="uButton">
          <u-button type="primary" text="编辑" :plain="true" shape="circle" @tap="jumpUser"></u-button>
        </view>
        <u-radio-group @change="groupChange" v-model="value">
          <u-radio :disabled="flag" size="25" :name="item.name" shape="circle"></u-radio>
        </u-radio-group>
      </view>
    </view>
    <u-toast ref="uToast"></u-toast>
    <view @tap="jumpAdd" class="uBut">    
      <u-button type="primary" text="新增就诊人"></u-button>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      obj: [{
        name: '刘亦菲',
        sex: '男',
        age: 18,
        state: 1
      },{
        name: '胡歌',
        sex: '女',
        age: 28,
        state: 0
      },{
        name: '胡歌1',
        sex: '女',
        age: 28,
        state: 0
      },{
        name: '胡歌2',
        sex: '女',
        age: 28,
        state: 0
      },{
        name: '胡歌3',
        sex: '女',
        age: 28,
        state: 0
      },{
        name: '胡歌4',
        sex: '女',
        age: 28,
        state: 0
      },{
        name: '胡歌5',
        sex: '女',
        age: 28,
        state: 0
      },{
        name: '胡歌6',
        sex: '女',
        age: 28,
        state: 0
      },{
        name: '胡歌7',
        sex: '女',
        age: 28,
        state: 0
      },],
      value: '',
      timeOut: '', //倒计时一分钟的计时器
      num: 0,
      flag: false
    }
  },
  mounted () {
    this.value = this.obj[0].name
  },
  methods: {
    groupChange () {
      if(this.num < 5) {
        this.$refs.uToast.show({
          type: 'default',
          title: '默认主题',
          message: "角色切换成功"
        })
        ++this.num
      } else if(!this.timeOut) {
        this.$refs.uToast.show({
          type: 'default',
          title: '默认主题',
          message: "操作频繁，请稍后重试"
        })
        this.flag = true
        this.timeOut = setTimeout(() => {
          this.num = -1
          this.flag = false
          clearTimeout(this.timeOut)
        }, 1000 * 60);
      } else {
        this.$refs.uToast.show({
          type: 'default',
          title: '默认主题',
          message: "操作频繁，一分钟后重试"
        })
      } 
    },
    jumpAdd () {
      uni.navigateTo({
        url: '/pages/aiDiagnosis/aiDiagnosis?type=addUse'
      });
    },
    jumpUser () {
      uni.navigateTo({
        url: '/subpage/userDetails/userDetails'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
  .main {
    padding-bottom: 200rpx;
    .roleList {
      position: relative;
      display: flex;
      align-items: center;
      padding: 15rpx 30rpx;
      margin-top: 16rpx;
      .imgText {
        width: 100rpx;
        height: 100rpx;
        background-color: #4865FF;
        text-align: center;
        line-height: 100rpx;
        color: #fff;
        border-radius: 50%;
        font-size: 40rpx;

      }
      .useTags {
        margin-left: 30rpx;
        .useTag {
          display: flex;
          font-weight: 700;
        }
        .uTag {
          margin-right: 15rpx;
        }
      }
      .useInp {
        position: absolute;
        right: 0px;
        display: flex;
        .uButton {
          margin-right: 10rpx;
        }
      }
    }
    .uBut {
      position: fixed;
      bottom: 0rpx;
      width: 100%;
    }
  }
</style>